<template>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" class="editnote">
        <div class="edit_layer">
            <div class="editor_top">
                <input class="editor_title form-control"  type="text" 
                    placeholder="标题" style="width: 160px"  v-model="currentItem.title"  />
                <div class="dropdown select_category">
                    <select id="select_menu" v-model="currentItem.tagId">
                        <option v-for="(item,index) in categories" :key="index" :value="item._id">{{item.name}}</option>
                    </select>
                </div>
                <ul class="tools">
                    <li class="save" @click="saveEdit()"></li>
                    <li class="cancel" @click="cancel()"></li>
                </ul>
            </div>
            <div class="content">
                <textarea  v-show="currentItem.type == NOTETYPE.TEXT" class="text_content form-control"  placeholder="内容" v-model="currentItem.content" > </textarea>
                <canvas_note ref="canvasNote" v-show="currentItem.type == NOTETYPE.IMG"></canvas_note>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import canvas_note from "@/components/CanvasNote.vue";
export default {
    name:"create_editor",
	components:{
	    canvas_note
	},
    data(){
        let NOTETYPE = this.$const.NOTETYPE;
        return {
            dialogFormVisible:false,
            currentItem:{tagId:""},
            type: NOTETYPE.TEXT, // 1、markdown ， 2 、画图
            categories:[],
            NOTETYPE:NOTETYPE
        }
    },   
    computed:{
        title(){
            if(this.currentItem && this.currentItem._id){
                return "编辑笔记"
            }else{
                return "新建笔记"
            }
        }
    },
    mounted(){
        this.getTages();
    },
    methods:{
        open({currentItem,type}){
            //   type:1  1、markdown ， 2 、画图
            //currentItem  如果参数为空，则表示新建
            type = type || this.NOTETYPE.TEXT; // 默认为 1
            currentItem = currentItem || {tagId:""};
            this.currentItem = JSON.parse(JSON.stringify(currentItem));

            // 如果自己有类型，则用自己的类型
            this.currentItem.type = this.currentItem.type ? this.currentItem.type : type;

            this.dialogFormVisible = true;

            if(this.currentItem.type  == this.NOTETYPE.IMG){
                this.$nextTick(()=>{
                    this.$refs.canvasNote.initSetImg(currentItem.content);
                })
            }
        },
        close(){
            this.dialogFormVisible = false;
            this.currentItem = {tagId:""};
        },
        async getTages(){
            let res = await this.$api.tagList();
			//console.log(res);
            let categories = [{
                name: "全部",
                _id:""
            }];
            categories = categories.concat(res);
           this.categories = categories;
		   //this.categories = res;
        },
        async saveEdit(){
            let currentItem = this.currentItem || {};
            if(! currentItem.title){
                this.$message.warning("标题不能为空");
                return ;
            }
			if(currentItem.tagId === undefined){
			    this.$message.warning("请选择类别");
			    return ;
			}
            // 如果是 画图
            if(currentItem.type == this.NOTETYPE.IMG){
                let res = await this.$refs.canvasNote.exportImg();
                currentItem.content = res.name;
            }
            if(currentItem._id){
                 // 修改
                await this.$api.editNote({
                    id: currentItem._id,
                    title: currentItem.title,
                    content: currentItem.content,
                    tagId: currentItem.tagId
                });
            }else{
                // 新建
                await this.$api.newNote({
                    title: currentItem.title,
                    content:currentItem.content,
                    tagId: currentItem.tagId,
                    type:currentItem.type,
                    state: 1
                });       
            }
                
            this.close();
            this.$emit("success");
        },
        cancel(){
            this.close();
            //this.$emit("cancel")
        }
    }

}
</script>